{include file="../application/admin/view/health/base.html" /}
<style>
	.statistics-row-col {
		margin-bottom: 30px;
	}
</style>
<div class="container-box" id="DashboardStatistics" v-cloak>
	<el-tabs v-model="activeName">
		<div class="choose-container">
			<div class="custom-choose-type display-flex">
				<div class="custom-choose-type-tip">
					省份
				</div>
				<div>
					<el-select clearable multiple filterable collapse-tags v-model="where.province_id"
					           placeholder="请选择省份">
						<el-option
								v-for="item in provinceData"
								:key="item.id"
								:label="item.shortname"
								:value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="custom-choose-type-tip">
					渠道
				</div>
				<div>
					<el-select clearable multiple filterable collapse-tags v-model="where.channel_id"
					           placeholder="请选择推广渠道">
						<el-option
								v-for="item in channelData"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="custom-choose-type-tip">
					筛选日期
				</div>
				<div>
					<el-date-picker :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
					                v-model="where.day"
					                type="daterange" placeholder="选择日期时间">
					</el-date-picker>
				</div>
			</div>
			<div class="custom-choose-sub display-flex">
				<div class="common-btn choose-btn choose-btn-active" style="margin-right: 20px;"
				     @click="operation('filter',{action:action})">
					筛选
				</div>
				<div class="common-btn choose-btn" @click="operation('clear',{action:action})">
					清空
				</div>
			</div>
		</div>
		<el-tab-pane label="数据列表" name="first">
			<el-row :gutter="20" class="statistics-row">
				<el-col :span="6" class="statistics-row-col">
					<el-statistic title="新增用户">
						<template slot="formatter"> {{statistics.new_user}}</template>
					</el-statistic>
				</el-col>
				<el-col :span="6" class="statistics-row-col">
					<el-statistic title="老用户活跃数">
						<template slot="formatter"> {{statistics.active_user_previous}}</template>
					</el-statistic>
				</el-col>
				<el-col :span="6" class="statistics-row-col">
					<el-statistic title="总签到次数">
						<template slot="formatter"> {{statistics.sign_in_user}}</template>
					</el-statistic>
				</el-col>
				<el-col :span="6" class="statistics-row-col">
					<el-statistic title="实名认证人数">
						<template slot="formatter"> {{statistics.authentication_user}}</template>
					</el-statistic>
				</el-col>
				<el-col :span="6" class="statistics-row-col">
					<el-statistic title="健康服务点击次数/人数">
						<template slot="formatter"> {{statistics.health_click}}/{{statistics.health_people}}</template>
					</el-statistic>
				</el-col>
				<el-col :span="6" class="statistics-row-col">
					<el-statistic title="测评点击次数/人数">
						<template slot="formatter"> {{statistics.evaluation_click}}/{{statistics.evaluation_people}}
						</template>
					</el-statistic>
				</el-col>
				<el-col :span="6" class="statistics-row-col">
					<el-statistic title="商品点击次数/人数">
						<template slot="formatter"> {{statistics.goods_click}}/{{statistics.goods_people}}</template>
					</el-statistic>
				</el-col>
			</el-row>
			<div class="custom-table">
				<div class="custom-header display-flex">
					<div class="display-flex">
						<div class="display-flex-c">
							<div class="common-btn choose-btn" @click="operation('export')">
								数据导出
							</div>
						</div>
					</div>
				</div>
				<div class="custom-table-border">
					<el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
					          :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
					          :header-cell-class-name="tableCellClassName">
						<el-table-column fixed prop="day" label="日期" min-width="120" align="center">
						</el-table-column>
						<el-table-column prop="new_user" label="新增用户" min-width="120" align="center">
						</el-table-column>
						<el-table-column label="老用户活跃数" min-width="120" align="center">
							<template slot-scope="scope">
								{{scope.row.active_user_previous}}
							</template>
						</el-table-column>
						<el-table-column prop="sign_in_user" label="签到用户数" min-width="120" align="center">
						</el-table-column>
						<el-table-column prop="authentication_user" label="实名用户数" min-width="120"
						                 align="center">
						</el-table-column>
						<el-table-column label="健康服务" min-width="120" align="center">
							<template slot="header" slot-scope="scope">
								健康服务
								<el-tooltip effect="light" content="点击次数/点击用户数" placement="top-start">
									<i class="el-icon-warning-outline"></i>
								</el-tooltip>
							</template>
							<template slot-scope="scope">
								{{scope.row.health_click}}/{{scope.row.health_people}}
							</template>
						</el-table-column>
						<el-table-column label="测评" min-width="120" align="center">
							<template slot="header" slot-scope="scope">
								测评
								<el-tooltip effect="light" content="点击次数/点击用户数" placement="top-start">
									<i class="el-icon-warning-outline"></i>
								</el-tooltip>
							</template>
							<template slot-scope="scope">
								{{scope.row.evaluation_click}}/{{scope.row.evaluation_people}}
							</template>
						</el-table-column>
						<el-table-column label="商品" min-width="120" align="center">
							<template slot="header" slot-scope="scope">
								商品模块
								<el-tooltip effect="light" content="点击次数/点击用户数" placement="top-start">
									<i class="el-icon-warning-outline"></i>
								</el-tooltip>
							</template>
							<template slot-scope="scope">
								{{scope.row.goods_click}}/{{scope.row.goods_people}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="page-container display-flex">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					               :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					               layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
					</el-pagination>
				</div>
			</div>
		</el-tab-pane>
		<el-tab-pane label="条形图" name="second">
			<div id="container-bar">

			</div>
		</el-tab-pane>
	</el-tabs>
</div>